<template>
  <el-container class="home">
    <!-- 头部区域 -->
    <el-header>
      <div class="logo">
        <div class="logoimg">
          <img src="../assets/img/logo.jpg" alt="" />
        </div>

        <span>后台管理系统</span>
      </div>
      <div class="goback">
        <button @click="goback"><span>返回</span></button>
      </div>
      <!-- <el-button type="info" >返回</el-button> -->
    </el-header>

    <!-- 主体区域 -->
    <el-container>

      <!-- 侧边栏区域 -->
      <el-aside :width="flag?'64px':'200px'">

        <div class="tglbtn" @click="toggleBtn">{{flagcon}}</div>

        <el-menu
         :unique-opened = "true"
          :default-active="activePath"
          class="el-menu-vertical-demo"
          background-color="#afdec0"
          text-color="#fff"
          active-text-color="#409afb"
          :collapse="flag"
          :collapse-transition = "false"
          :router="true"
        >
          
          <el-submenu :index="item.order + ''" v-for="item in menuList" :key="item.id">
            <!-- 一级菜单； -->
            <template slot="title" >
              <i :class="menuIcon[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>
            <!-- 二级菜单 -->
            
            <el-menu-item :index="'/' + it.path " v-for="it in item.children" :key="it.id" @click="getPath('/'+it.path)">
              <template slot="title">
              <i class="el-icon-menu"></i>
              
                <span>{{it.authName}}</span> 
              
            </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右边区域 -->
      <el-main>
        <!-- 二级路由占位符 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
  <!--  -->
</template>

<script>
export default {
  data() {
    return {
      menuList:[],
      menuIcon:{
        '125':'el-icon-user-solid',
        '103':'el-icon-s-help',
        '101':'el-icon-s-goods',
        '102':'el-icon-s-claim',
        '145':'el-icon-s-data',
      },
      flag:false,
      flagcon:'收起',
      activePath:'/user'
    };
  },
  created() {
    this.getMenudata();
    this.activePath = window.sessionStorage.getItem('activePath');
  },
  methods: {
    // 获取aside 导航栏数据
    async getMenudata() {
      const {data:res} = await this.$http.get('menus')
      // console.log(res);
      if(res.meta.status !=200) return this.$message.error(res.meta.msg)
      this.menuList = res.data;
    },
    // 返回
    goback() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    // 展开收起侧边栏
    toggleBtn() {
      console.log(this.flag);
      if(this.flag) {
        this.flagcon = '收起';
      }else {
        this.flagcon = '展开';
      }
      this.flag = !this.flag;
    },
    // 激活的侧边栏项高亮
    getPath(pathName) {
      console.log(pathName); 
      // 在 sessionStorage 中存储 刷新从中取值
      window.sessionStorage.setItem('activePath',pathName);
      this.activePath = pathName;
    }
    
  },
};
</script>

<style>
.el-container {
  width: 100%;
  height: 100%;
}
/* header  */
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 296px;
  text-align: center;
  line-height: 60px;
  background-color: #8bc19f;
  color: #333;
  /* padding-left: 0px; */
}
.el-header .logo {
  display: flex;
  align-items: center;
  height: 100%;
}
.el-header .logo .logoimg {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  margin-right: 8px;
  padding: 5px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 5px 5px 10px #84c5c0 inset, -5px -5px 10px #db90b3 inset;
}
.el-header .logo .logoimg img {
  height: 100%;
  border-radius: 50%;
}
.el-header .logo span {
  font-weight: bold;
  font-size: 22px;
}
.el-header .goback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  background-color: #b5de9d;
  border-radius: 30px;
  /* overflow: hidden; */
}
.el-header .goback button {
  position: relative;
  overflow: hidden;
  padding: 8px 15px;
  outline: none;
  text-transform: uppercase;
  color: rgb(103, 101, 101);
  border: 2px solid #fff;
  border-radius: 30px;
  background: transparent;
}
.el-header .goback button:after {
  content: "";
  display: block;
  position: absolute;
  top: -36px;
  left: -100px;
  width: 30px;
  height: 125px;
  opacity: 20%;
  background-color: #fff;
  transform: rotate(-45deg);
}
.el-header .goback button:hover::after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  /* -webkit-transform: all ; */
}
.el-header .goback button span {
  z-index: 999;
  font-weight: 600;
}

.el-header .el-button:hover {
  box-shadow: 5px 5px 5px #e0460d, -5px -5px 5px #e0460d;
}
/* header end */
/* aside */
.el-aside {
  color: #333;
  line-height: 200px;
}
.el-aside .tglbtn{
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: rgb(146, 220, 165);
}
.el-aside .el-menu {
  width: 100%;
  height: calc(100% - 30px);
}


.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>